<template>
	<view class="body">
		<view class="head">
			<view class="head_left" @click="back"><image src="/static/img/fanhui.png"></image></view>
			<view class="head_center hei_38_bold">在线客服</view>
			<view class="head_right hei_30_bold"></view>
		</view>
		<view class="content">
			<view class="app_content" >
				<view class="kefu_banner">
					<image src="/static/img/kefu_top.png"></image>
				</view>
				<view class="kefu_list hei_26">
					<view class="kefu_item" >
						<view>
							<image style="width: 26rpx;height: 32rpx;" src="/static/img/kefu_shouji.png"></image>
							客服电话
						</view>
						<text>{{mobile}}<text class="ci_copy hong_24" @click="boda(mobile)">拨打</text></text>
					</view>
					<view class="ma">
						<view class="ma_left">
							<image style="width: 40rpx;height: 30rpx;" src="/static/img/kefu_weixin.png"></image>
							微信二维码
						</view>
						<view class="ma_right hong_24">
							<image :src="erweima" mode=""></image>
							<text class="save_btn" @click="baocun(erweima)">保存</text>
						</view>	
					</view>
					
			
					<view class="kefutime">
						<view class="kefutime_top">
							<image src="/static/img/kefu_time.png"></image>
							服务时间
						</view>
						<view class="hei_26">{{time}}</view>
					</view>
					
				</view>			
			</view>
		</view>
<uni-popup id="popup_quanxian"background-color="#fff" ref="popup_quanxian" type="top">
   <view class="quanxian">
	   <view class="quanxian_box">
   	 <view class="quanxian_title hei_30_bold">
   	 	存储空间/照片/相机/摄像头权限申请说明：
   	 </view>
	 <view class="quanxian_txt hei_30">
			便于您使用该功能上传您的照片/图片/视频用于更换头像、实名认证、意见反馈、保存相册、发布商品/分享、下载与客服沟通等场景中读取和写入相册和文件内容。
	 </view>
   </view>
   </view>
</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			img_url: uni.getStorageSync('img_url'),
			mobile:'',
			time:'',
			erweima:''
			
		};
	},

	onShow() {},
	onReady() {},
	onLoad(option) {
		
		this.get_peizhi()
		
		
		
		
	},
	methods: {
		back() {
			uni.navigateBack();
		},
		get_peizhi(){

			this.$http
				.get({
					url: '/api/getConfig',
				})
				.then(res => {
					if (res.code == 200&&res.config) {
						
						
						this.mobile=res.config.customer_service_phone
						this.erweima=res.config.customer_service_qrcode
						this.time=res.config.service_time
					}
				});
		},
		jinqun(){
			var src=this.alipay_group_url
			// #ifdef MP-ALIPAY
				my.ap.navigateToAlipayPage({
				  path: src
				});
			// #endif
			// #ifdef APP
			  		plus.runtime.openURL(src)
			// #endif
			// #ifdef H5
			 
			 window.open(src, '_blank');
		    // #endif
		},
		fuzhi(text) {
			uni.setClipboardData({
				data: String(text),
				success: function() {
					uni.showToast({
						title: '复制成功',
						duration: 2000
					});
				}
			});
		},
		go_chat(){
			uni.navigateTo({
				url:'/pages/index/chat?type=1&userid='+this.kefu_mobile
			})
		},
		get_api(){
			var data={
				none_load:true,
			}
			var arry=[
				'/mapi/index/app_kefu'
				]
			arry.forEach(function(item, index) {
				data['api[' + index + ']'] = item;
			});
			this.$http
				.post({
					url: '/mapi/index/getapireturn',
					data:data
				})
				.then(res => {
					if (res.code == 0) {
		
		                if (res.data['/mapi/index/app_kefu'].code==0) {
							this.app_kefudata=res.data['/mapi/index/app_kefu'].data
		                	this.get_app_kefu()
		                }
		
						
						
					}
				});
		},
		get_app_kefu(){
			// this.$http
			// 	.post({
			// 		url: '/mapi/index/app_kefu',
			// 	})
			// 	.then(res => {
			// 		if (res.code == 0) {
						// this.app_kefudata=this.app_kefudata
						var paixu=[]
						if(this.app_kefudata.kefu.qq_group){
							paixu.push({
							   num:this.app_kefudata.kefu.qq_group.paixu,
							   xuhao:1
							})
						}
						if(this.app_kefudata.kefu.qq_kefu){
							
							paixu.push({
							   num:this.app_kefudata.kefu.qq_kefu.paixu,
							   xuhao:2
							})
						}
						if(this.app_kefudata.kefu.qq_group_url){
							
							paixu.push({
							   num:this.app_kefudata.kefu.qq_group_url.paixu,
							   xuhao:3
							})
						}
						if(this.app_kefudata.kefu.weixin_url){
							
							paixu.push({
							   num:this.app_kefudata.kefu.weixin_url.paixu,
							   xuhao:4
							})
						}
						if(this.app_kefudata.kefu.weixin){
							
							paixu.push({
							   num:this.app_kefudata.kefu.weixin.paixu,
							   xuhao:5
							})
						}
						if(this.app_kefudata.kefu.mobile){
							
							paixu.push({
							   num:this.app_kefudata.kefu.mobile.paixu,
							   xuhao:6
							})
						}
						if(this.app_kefudata.kefu.weixin_public_url){
							
							paixu.push({
							   num:this.app_kefudata.kefu.weixin_public_url.paixu,
							   xuhao:7
							})
						}
						if(this.app_kefudata.kefu.zaixiankefu){
							
							paixu.push({
							   num:this.app_kefudata.kefu.zaixiankefu.paixu,
							   xuhao:8
							})
						}
					paixu.sort((b,a) => a.num - b.num);
					
						this.paixu=paixu
						
						// console.log(paixu)
						
				// 	}
				// });
		},
		compare(property){
		    return function(b,a){
		        var value1 = a[property];
		        var value2 = b[property];
		        return value1 - value2;
		    }
		},
		huoqu_kefu() {
			this.$http
				.post({
					url: '/mapi/index/app_kefu'
				})
				.then(res => {
					if (res.code == 0) {
						this.kefu = res.data.kefu;
						
					}
				});
		},
		boda(num){
		   wx.makePhoneCall({
		     phoneNumber: num //仅为示例，并非真实的电话号码
		   })	
		},
		baocun(url){
			let that = this;
			// #ifdef H5
			
			let alink = document.createElement('a');
			alink.href = url;
			alink.download = url;
			alink.click();
			// #endif
			//#ifdef APP-PLUS||MP-WEIXIN||MP-ALIPAY||MP-KUAISHOU
			// #ifdef APP-PLUS
			if (uni.getSystemInfoSync().platform == 'android'){
				that.$refs.popup_quanxian.open();
			}
			//#endif
			uni.showLoading({
				title: '保存中'
			});
			uni.saveImageToPhotosAlbum({
				filePath: url,
				success: function() {
					uni.hideLoading();
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					});
					that.$refs.popup_quanxian.close();
					uni.setStorageSync('is_tanxiangji', 1);
				},
				fail: function() {
					uni.hideLoading();
					uni.showToast({
						title: '保存失败，请稍后重试',
						icon: 'none'
					});
					that.$refs.popup_quanxian.close();
				}
			});
			// #endif
		},
	}
};
</script>

<style>
.head {
	border-bottom: 1px solid #eeeeee;
}
.content {
}

/* 在线客服 */
.kefu_banner image {
	height: 186rpx;
	width: 100%;
}

.kefu_item {
	padding: 0 30rpx;
	/* border-bottom: 1px solid #eeeeee; */
	margin-bottom: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.qunhao{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx 0 76rpx;
	margin-bottom: 30rpx;
}
.kefu_item view {
	display: flex;
	align-items: center;
}

.kefu_item image {
	margin-right: 14rpx;
}


.erweima {
	width: 316rpx;
	height: 316rpx;
	border: solid 1px #eeeeee;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.erweima image {
	width: 316rpx;
	height: 316rpx;
}

.kefu_bottom {
	margin-top: 50rpx;
	text-align: center;
	width: 100%;
	padding-bottom: 20rpx;
}

.kefu_bottom view {
	margin: 20rpx auto;
}
.kefu_bottom button {
	height: 50rpx;
	/* background-color: #ff2b47; */
	border: 1px solid #ff2b47;
	border-radius: 40rpx;
	width: 200rpx;
	margin: 20rpx auto 20rpx;
	line-height: 50rpx;
	
}

.kefutime image {
	width: 30rpx;
	height: 30rpx;
	margin-right: 16rpx;
	vertical-align: middle;
}
.kefutime {
	padding: 32rpx 30rpx;
	/* border-bottom: 1px solid #dedede; */
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.kefutime_top {
	
	display: flex;
	align-items: center;
}
.kefu_title {
	margin: 16rpx 0 6rpx;
	padding-left: 40rpx;
	display: flex;
	align-items: center;
}
.kefu_title text {
	display: inline-block;
	width: 6rpx;
	height: 32rpx;
	background-color: #f52122;
	margin-right: 10rpx;
}
.kwfu_tuihuo {
	border-top: 20rpx solid #f4f4f4;
	padding-top: 12rpx;
	padding-bottom: 32rpx;
}
.kefu_dizhi {
	max-width: 75%;
	text-align: right;
}
.zaixian{
	height: 100rpx;
}
.zaixian image{
	width: 36rpx;
	height: 30rpx;
}
.zaixian button{
	width: 172rpx;
	height: 52rpx;
	background-color: #fd4259;
	border-radius: 5rpx;
	line-height: 52rpx;
}
.ci_copy{
	height: 36rpx;
	background-color: #ffffff;
	border-radius: 18rpx;
	border: solid 1rpx #fd4259;
	padding: 0 14rpx;
	line-height: 36rpx;
	margin-left: 10rpx;
}
.kefu_ren{
	width: 25rpx;
	height: 36rpx;
	margin-right: 10rpx;
}
.ma_right image{
	width: 180rpx;
	height: 180rpx;
}
.ma{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 0 30rpx;
	margin-bottom: 30rpx;
}
.ma_left{
	display: flex;
	align-items: center;
}
.ma_left image{
	margin-right: 16rpx;
}
.ma_right{
	display: flex;
	align-items: center;
}
.save_btn{
	height: 36rpx;
	background-color: #ffffff;
	border-radius: 18rpx;
	border: solid 1rpx #fd4259;
	padding: 0 14rpx;
	line-height: 36rpx;
	margin-left: 10rpx;
}
.kefu_list{
	padding-bottom: 50rpx;
	padding-top: 30rpx;
}
.zaixian{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}
.zaixian_left{
	display: flex;
	align-items: center;
}
.zaixian_left image{
	margin-right: 10rpx;
}
.pay_qun{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100rpx;
	background-color: #ffffff;
	margin-bottom: 10rpx;
	padding: 0 24rpx;
}
.pay_qun_left{
	display: flex;
	align-items: center;
}
.pay_qun image{
	width: 50rpx;
	height: 50rpx;
	margin-right: 10rpx;
}
.pay_qun button{
	width: 100rpx;
	height: 50rpx;
	line-height: 50rpx;
	background-color:#3478fc ;
}
</style>
